<template>
	<view>
		<!-- 商品信息 -->
		<view class="detail-data">
			<view class="mame">
				{{ goodsDetaul.name }}
			</view>
			<view class="price-num">
				<view class="price">
					￥{{ goodsDetaul.price }}
				</view>
				<view class="num">
					<view class="num-item" color="#5ca45b">
						{{  goodsDetaul.category }}
					</view>
					<view class="num-item">
						<uni-icons type="eye" size="20"></uni-icons>
						{{  goodsDetaul.readNum }}
					</view>
					<view class="num-item">
						<uni-icons type="star" size="20"></uni-icons>
						{{  goodsDetaul.starNum }}
					</view>
				</view>
			</view>
			
			<view class="supplement">
				<view class="freight">
					运费:
					<text v-show="goodsDetaul.freight==0" class="free">免运费</text>
					<text v-show="goodsDetaul.freight==1">按距离计算</text>
				</view>
				<view class="goods-tags">
					<view class="goods-tag">
						新品
					</view>
				</view>
			</view>
		</view>
		<!-- 商品简介 -->
		<view class="more-data">
			<view v-html="goodsDetaul.detail"></view>
		</view>
	
		<!--  卖家信息  -->
		<view class="saler">
			<view class="user">
				<view class="user">
					<image :src="goodsDetaul.sellerAvatar" mode=""></image>
				</view>
				<view class="username">
					{{ goodsDetaul.sellerName }}
				</view>
			</view>
			<view class="to">
				<uni-icons type="forward" size="36"></uni-icons>
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		props: {
			goodsDetaul: {
				type: Object,
				default: () => {
					return {
						name: "",
						price:0,
						freight:0,
						category:"",
						readNum:0,
						starNum:0,
						detail: ``,
						// 卖家
						userImg:"",
						username:""
					}
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.detail-data {
		padding: 10rpx 15rpx;
		padding-bottom: 0;
		background-color: #ffffff;
		box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
		border-radius: 20rpx;

		.mame {
			// height: 90rpx;

			// width: 100%;
			font-size: 40rpx;
			display: -webkit-box;

		}

		.price-num {
			padding: 5rpx 5rpx;
			display: flex;
			justify-content: space-between;

			.price {
				font-size: 44rpx;
				color: #ff5500;
			}

			.num {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.num-item {
					display: flex;
					align-items: center;
					padding: 0 15rpx;

					iocn {}
				}

			}

		}
	
		
		.supplement{
			padding: 0 10rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.freight{
				text{
					color: #ff5500;
				}
				.free{
					color: #5ca45b;
				}
			}
			
			.goods-tags{
				padding-right: 10rpx;
				min-width: 200rpx;
				display: flex;
				justify-content: right;
				.goods-tag{
					
				}
			}
		}
	}



	.saler {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 15rpx;
		box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
		border-radius: 20rpx;

		.user {
			display: flex;
			padding: 0 15rpx;

			.user {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.username {
				width: 160rpx;
				padding: 0 15rpx;
				font-size: 36rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}


		.to {}
	}


	.more-data {
		// margin-top: 30rpx;
		padding: 15rpx 25rpx;
		background-color: #ffffff;
	}
	
	/deep/p{
		width: 100%;
		// text-align: center;
		img{
			// width: 100%;
			width: 700rpx !important ;
		}
		image{
			width: 700rpx !important ;
		}
	}
</style>